<template>
    <button :class="classes" @click="handler" :style="$attrs.style">
        <span>
            <slot name="default"></slot>
        </span>
    </button>
</template>

<script setup>
import { computed,defineOptions } from 'vue'

// 接收传过来的属性
const props = defineProps({
    type: {
        type: String,
        default: 'default'
    },
    block: {
        type: Boolean,
        default: false
    },
    disabled: {
        type: Boolean,
        default: false
    }
})

// 将传过来的属性赋值给动态class
const classes = computed(() => {
    return [
        'eq-btn',
        'eq-btn-' + props.type,
        { block: props.block },
        { disabled: props.disabled }
    ]
})

// 禁止透传
defineOptions({
    inheritAttrs: false
})

// 接收返回事件
const handler = (event) => {
    emit('click', event)
}
</script>

<style lang="scss" scoped>
.eq-btn {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;

    &:hover {
        box-shadow: 0px 0px 5px #666666;
    }
}

.eq-btn-danger {
    color: #fff;
    background-color: #f56c6c;
    border-color: #f56c6c
}

.eq-btn-success {
    background: #5daf34;
    border-color: #5daf34;
    color: #fff;
}

.eq-btn-warning {
    color: #fff;
    background-color: #e6a23c;
    border-color: #e6a23c
}

.eq-btn.block {
    width: 100%;
    display: block !important;
}

.eq-btn.disabled {
    color: #fff;
    cursor: not-allowed;
    opacity: 0.5;
}
</style>